﻿<!DOCTYPE html>
<!-- saved from url=(0031)about:http://api.map.baidu.com/ -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QXwuA2Zi8h3huVQvqVrW2MhU"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=59db371659c04947a1ff044e80565718&v=1.4&services=true"></script>  
    <!--加载鼠标测距工具-->  
    <script src="DistanceTool_min.js" type="text/javascript"></script>
    <!--加载鼠标绘制工具-->  
    <script type="text/javascript" src="DrawingManager_min.js"></script>  
    <link rel="stylesheet" href="DrawingManager_min.css" /> 

    <title>GPS地图</title>
</head>
<body>
<!--     <div id="mouselng" style="visibility:hidden"></div>
    <div id="mouselat" style="visibility:hidden"></div>  -->
    <div id="allmap"></div>
</body>
</html>

<script type="text/javascript">
    // 百度地图API功能
    try {
        // 创建Map实例
        var map = new BMap.Map("allmap",{mapType:BMAP_HYBRID_MAP});
        
        //创建点
        map.centerAndZoom(new BMap.Point(108.876433, 36.269395), 19);
        //添加比例尺控件(左下角显示的比例尺控件)
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT }));
        // 左下角，添加默认缩放平移控件，缩略图控件
        map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }));

        //添加地图类型
        var mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP] });
        //var mapType2 = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_LEFT});
        map.addControl(mapType1);          //地图 混合
        //map.addControl(mapType2);            //2D图，卫星图

        map.enableDragging();           //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(true);//启用地图滚轮放大缩小

        map.enableDoubleClickZoom();    //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();           //启用键盘上下左右键移动地图 
        map.enableContinuousZoom();     // 开启连续缩放效果 
        map.enableInertialDragging();   // 开启惯性拖拽效果  

        //根据IP定位城市
        function myFun(result) {map.setCenter(result.name);}
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);



        //在地图上画轨迹 strat
        function DrawOrit1()  
        {  
            var Array=[];  
            var total_num= window.external.getRowsNumber();  
            for(var i=0;i<=2*total_num-1;i++) {  
                Array.push(window.external.Getpoints(i));  
            }  
            var PointArr=[];  
            for(var i=0;i<=Array.length-1;i+=2)  
            {   //偶数索引存经度，奇数存维度  
                PointArr.push(new BMap.Point(Array[i],Array[i+1]));  
            }  
            var polyline = new BMap.Polyline(PointArr, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线  
            map.addOverlay(polyline);  
            window.external.ClearRows_num();//重置窗体计数器  
        }       

        // //实时显示地图坐标 strat
        // map.addEventListener("mousemove",GetlngAndlat);     
        // function GetlngAndlat(e) {
        //     if(e.point.lng!=null)  
        //     {   
        //         document.getElementById("mouselng").innerHTML=e.point.lng;  
        //         document.getElementById("mouselat").innerHTML=e.point.lat;  
        //     }
        // }

        //测量距离 strat
        function openGetDistance() {
            var myDis=new BMapLib.DistanceTool(map);//map为上面已经初始化好的地图实例  
            myDis.open();  
        }


        //左右击鼠标给地图上放marker strat 放标注，并且将JS的数据传送给WINFORM 
        function PUTANDSEND() {  
            //右键标记
            map.addEventListener("rightclick", putAndsend);
            //左键标记
            //map.addEventListener("click", putAndsend);
        }
        var marker_num = 0;
        function putAndsend(e)  
        {  
            //放标注  
            var p1=new BMap.Point(e.point.lng,e.point.lat);  
            var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24));
            var marker = new BMap.Marker(p1, { icon: myIcon });  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中 

            marker_num++;//标注索引，这个是个全局变量  
            var whichCar=window.external.setWhichCar();  
            var label=new BMap.Label(whichCar+"号车-坐标"+marker_num+":"+  
            "("+e.point.lng+","+e.point.lat+")",{offset:new BMap.Size(20,-10)});  
            marker.setLabel(label);  
            //给WINFORM传值  
         //   window.external.PutIntotextBox(marker_num,whichCar,e.point.lng,e.point.lat);  
        } 


        //在地图上画圆形或者方形 strat 
        // 编写自定义函数，创建标注   
        function addMarker(point) { 
            var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24));
            var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中  
        }
        var overlays = [];
        var complete=function(e)  
        {  
            overlays.push(e.overlay);  
        };  

        //线条样式  
        var styleOptions = {  
            strokeColor:"blue",    //边线颜色。  
            fillColor:"blue",      //填充颜色。当参数为空时，圆形将没有填充效果。  
            strokeWeight: 3,       //边线的宽度，以像素为单位。  
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。  
            fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。  
            strokeStyle: 'solid' //边线的样式，solid或dashed。  
        }  


        //实例化鼠标绘制工具  
        var drawingManager = new BMapLib.DrawingManager(map, {  
            isOpen: false, //是否开启绘制模式  
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {  
            anchor: BMAP_ANCHOR_TOP_LEFT, //位置  
            offset: new BMap.Size(5, 5), //偏离值  
            scale: 0.6, //工具栏缩放比例
			drawingModes:[
			BMAP_DRAWING_MARKER
			],
            drawingTypes : [           
            BMAP_DRAWING_CIRCLE,    
            BMAP_DRAWING_RECTANGLE
        ]  
        },  
        circleOptions: styleOptions, //圆的样式   
        rectangleOptions: styleOptions //矩形的样式  
        });

        //添加鼠标绘制工具监听事件，用于获取绘制结果  
        drawingManager.addEventListener('overlaycomplete', complete);  
        //回调获得覆盖物信息，未使用该版本  
        var overlaycomplete = function (e) {
            overlays.push(e.overlay);
            var result = "";
            result += e.drawingMode + ":";
            if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
                var circle_radius = e.overlay.getRadius();
                var circle_point = new BMap.Point(e.overlay.getCenter().lng, e.overlay.getCenter().lat);
                alert(map.getDistance(circle_point, tests[1]));
                for (var i = 0; i < 3; i++) {
                    if (map.getDistance(circle_point, tests[i]) <= circle_radius) {
                        //AddMarker(tests[i]);
                        var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24));
                        var marker1 = new BMap.Marker(tests[i], { icon: myIcon });  // 创建标注
                        map.addOverlay(marker1);              // 将标注添加到地图中  
                    }
                }
                alert(result);
                }
            if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {
                result += ' 所画的点个数：' + e.overlay.getPath()[1].lng;
                alert(result);
            } 
        };  

        //drawingManager.enableCalculate();   
        //----------------------公用方法，用元素id获取元素的值-------------------  
        function $(id){  
            return document.getElementById(id);  
        }  

        //------------------画矩形，让WINFORM调用---------------  
        function drawRec(){  
            drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);}  
        //------------------画圆，让WINFORM调用----------------  
        function drawCircle(){  
            drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);}  
        //------------------清除所有已画图形，让WINFORM调用--------------------  
        function clearAll() {  
            map.clearOverlays();
            // for(var i = 0; i < overlays.length; i++){  
            //     map.removeOverlay(overlays[i]);  
            // }  
            // overlays.length = 0
        }  
        //在地图上画圆形或者方形 end 

////////////////////////////////////////////////////////////////////////////
        // 用经纬度设置地图中心点(GPS) 不保留之前的
        function theLocation(Longitude,Latitude) {
            var gpsPoint = new BMap.Point(Longitude, Latitude);
            //gps坐标纠偏
            map.clearOverlays();
            BMap.Convertor.translate(gpsPoint, 0, translateCallback);     //真实经纬度转成百度坐标
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }


        // 用经纬度设置地图中心点(GPS)保留之前的
        function ListLocation(Longitude,Latitude) {
            //map.clearOverlays();
            var new_point = new BMap.Point(Longitude,Latitude );
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);                // 将标注添加到地图中
            map.panTo(new_point);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }

        // 用经纬度设置地图中心点
        function testAlert(msg) {
            var str = new String;
            str =  msg.toString()
            // str = "test"
            alert(str);
        }

        // function enableZoomDrag()
        // {
        //     //添加拖拽和缩放功能
        //     map.enableScrollWheelZoom(true);
        //     map.enableDragging();
        // }


        //坐标转换完之后的回调函数
        translateCallback = function (point) {
            map.clearOverlays();
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            map.setCenter(point);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
    } catch (e) {
        alert("地图加载失败，请检查网络！");

    }
</script>

